<template>
  <div>
    <div class="history">
      <div class="history__form">
        <p style="font-size: 16px">请输入订单号，即可查看已付款的测算结果：</p>
        <input
          type="text"
          placeholder="输入订单号"
          class="text"
          v-model="orderNo"
        /><button @click="queryOrder">立即查询</button>
        <div class="public_ddxx" v-if="orderInfoVisible">
          <div
            class="public_k"
            style="
              display: flex;
              flex-direction: row;
              justify-content: space-between;
            "
          >
            <span class="public_des" style="font-size: 16px; font-weight: 700"
              >{{ orderInfo.userName }}.公历 1995 年 11 月 2 日 15 时</span
            >
            <span class="public_pyzt public_red" v-if="orderInfo.payStatus == 1"
              >已支付</span
            >
            <span class="public_pyzt public_red" v-else>未支付</span>
          </div>
          <div class="public_k">
            <span class="public_pyzt_ddxx">订单号:{{ orderInfo.orderNo }}</span>
          </div>
          <div class="public_k">
            <span class="public_pyzt_ddxx2"
              >订单时间:{{
                formatDate(orderInfo.createTime, "YYYY-MM-DD HH:mm:ss")
              }}</span
            >
          </div>
          <div class="public_k public_bddd" v-if="orderInfo.payStatus == 1">
            <a
              class="public_pyzt__look"
              href="http://www.yuqiaoart.top/api/payRes?oid=175024312920048758"
              @click="clickAnalysis"
              >点击查看</a
            >
          </div>
        </div>
      </div>

      <div class="history__tips">
        <p style="font-size: 14px">
          温馨提示：若忘记或找不到订单号？请按照下方操作获取
        </p>
        <strong>微信支付获取订单号</strong
        ><img src="../../assets/pic/cx_wx.jpg" /><strong
          >支付宝支付获取订单号</strong
        ><img src="../../assets/pic/cx_zfb.jpg" />
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import router from "@/router";
import { useRoute } from "vue-router";

const orderNo = ref(null);

const orderInfoVisible = ref(false);

const orderInfo = ref({});

const queryOrder = () => {
  console.log(orderNo.value);
  axios
    .get("http://www.yuqiaoart.top/api/queryOrder?orderNo=" + orderNo.value)
    .then((res) => {
      if (res.data.code == 200) {
        let resData = res.data.data;
        orderInfo.value = resData;
        // orderInfo.value.userINfo = JSON.parse(resData.userInfo)
        orderInfoVisible.value = true;
        console.log(orderInfo.value);
      } else if (res.data.code !== 200) {
        ElMessage({
          message: res.data.msg,
          type: "warning",
        });
      }
      // selectTimeInfo.value = res.data.data
      // let json = JSON.parse(selectTimeInfo.value.userInfo)
      // selectTimeInfo.value.userInfo = json
      // selectTimeInfo.value.time = JSON.parse(json.time)
    });
};

const clickAnalysis = () => {};
// 修复后的格式化方法
const formatDate = (value, format = "YYYY-MM-DD") => {
  if (!value) return "";

  const date = new Date(value);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");

  return format
    .replace("YYYY", year)
    .replace("MM", month)
    .replace("DD", day)
    .replace("HH", hours)
    .replace("mm", minutes)
    .replace("ss", seconds);
};

// 测试修复后的方法
</script>

<style>
@import url("../../assets/index_static/app.css");

.order_info {
  background-color: white;
  border: 1px solid #dedede;
  border-radius: 5px;
}

.public_ddxx {
  width: 93%;
  margin: 2vw auto;
  overflow: hidden;
  border: 1px solid #dedede;
  border-radius: 5px;
  background: #ffffff;
}

.public_k {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: 4px 10px;
  box-sizing: border-box;
}

.public_bddd {
  border-top: 1px dotted #949494;
  background-color: #f5f0e9;
}

.public_red {
  color: #dc273f;
}
</style>
